// 获取操作对象
var box1 = document.querySelector('.container');
var quans = document.querySelectorAll('[name="quan"]');
// getelmentsByName():获取页面中name属性值为"selectOne"的所有元素，返回一个伪数组
var xuans = document.getElementsByName('xuan');
var cartbig = document.querySelector('.cartbig');
var as = document.querySelectorAll('.tab a');
var contnetImg = document.querySelector('.content-img');
var imgul1 = document.querySelector('.img-ul1');
var imgul2 = document.querySelector('.img-ul2');
var active1 = document.querySelector('.tab .active')
var active2 = document.querySelector('.tab .active2')
//给大盒子绑定事件 - 事件委托
box1.onclick = function(e) {
    // console.log(111)
    // 兼容写法
    var e = e || window.event
    // 获取兼容操作目标
    var tg = e.target || e.srcElement
    // 全选
    if (tg.name == 'quan') {
        // console.log(121);
        // 遍历选中框
        for(var i=0;i<quans.length;i++) {
            quans[i].onclick = function() {
                // 简写代码
                for(var j=0;j<xuans.length;j++) {
                    xuans[j].checked = this.checked
                }
                for(var j=0;j<quans.length;j++) {
                    quans[j].checked = this.checked
                }
            }
        }
        total1()
        checked1()
        danx()
    }
    // 单选
    if (tg.name === "xuan") {
        // console.log(111);
        danx()
        total1()
        checked1()
    }
    // 增加一行
    if (tg.innerHTML == "加入购物车") {
        // 获取商品信息
        var list = tg.parentNode.children
        var imgurl = list[0].getAttribute('src')
        var name = list[1].innerHTML
        var price = list[2].innerHTML
        price = parseFloat(price.split('￥')[1])
        // 创建ul
        var newul = document.createElement('ul')
        // 添加内容
        newul.innerHTML = `
        <li>
            <input type="checkbox" name="xuan">
        </li>
        <li>
            <img src="${imgurl}" alt="">${name}
        </li>
        <li>${price}</li>
        <li>
            <button>-</button>
            <button>1</button>
            <button>+</button>
        </li>
        <li>￥<span style="color:red">${price}</span></li>
        <li>
            <a href="javascript:;">移入关注</a>     
            <a href="javascript:;">删除</a>
        </li>
        `
        // 追加到cart-big盒子
        cartbig.appendChild(newul)

        danx()
        total1()
        checked1()
    }
    // 删除一行
    if(tg.innerHTML == "删除") {
        // console.log(111);
        tg.parentNode.parentNode.remove()
        danx()
        total1()
        checked1()
    }
    // 删除选中的商品
    if(tg.innerHTML == "删除选中的商品") {
        // 遍历所有选中框对象
        for(let i=0;i<xuans.length;i++) {
            //判断是否被选中
            if(xuans[i].checked) {
                xuans[i].parentNode.parentNode.remove()
                // 让下标自减 - 因为没删一个下标就往前走一位
                i--
            }
        }
        danx()
        total1()
        checked1()
    }
    //清空购物车
    if(tg.innerHTML == "清空购物车") {
        // console.log(122);
        // 遍历选中框
        for(let i=0;i<xuans.length;i++) {
            xuans[i].parentNode.parentNode.remove()
            i--
        }
        danx()
        total1()
        checked1()
    }
    // 数量增加
    if(tg.innerHTML == "+") {
        // 获取上一个兄弟标签
        var num = tg.previousElementSibling.innerHTML
        // 让数量自增
        num++
        // 重新赋值给当前点击位置
        tg.previousElementSibling.innerHTML = num
        
        var price1 = tg.parentNode.previousElementSibling.lastElementChild.innerHTML
        //计算小计 - 数量乘于单价即是商品总价格
        var sum = num * parseFloat(price1)
        //把计算的小计结果赋值给小计
        tg.parentNode.parentNode.children[4].lastElementChild.innerHTML = sum.toFixed(2)//让小计保留两位小数

        total1()
        checked1()
    }
    
    // 减少数量
    if(tg.innerHTML === "-") {
        var num = tg.nextElementSibling.innerHTML
        // 判断数量  限制最小值
        if(num <= 1) {
            num = 1
        } else {
            num--
        }
        tg.nextElementSibling.innerHTML = num

        // 获取单价
        var price1 = tg.parentNode.previousElementSibling.lastElementChild.innerHTML
        // 计算小计
        var sum = num*parseFloat(price1)
        // 重新赋值给小计
        tg.parentNode.parentNode.children[4].lastElementChild.innerHTML = sum.toFixed(2)//让小计保留两位小数

        total1()
        checked1()
    }

    // 点击右箭头
    if(tg.className === 'arrow right') {
        //隐藏一个ul
        imgul1.style.display = 'none'
        // 显示第二个ul
        imgul2.style.display = 'block'
    }
    // 点击左箭头
    if(tg.className === 'arrow left') {
        //显示第一个ul
        imgul1.style.display = 'block'
        // 隐藏第二个ul
        imgul2.style.display = 'none'
    }
    if(tg.className === 'active2') {
        active2.style.borderBottom = '3px solid red'
        active1.style.borderBottom = 'none'
        imgul1.style.display = 'none'
        imgul2.style.display = 'block'
    }
    if(tg.className === 'active') {
        active1.style.borderBottom = '3px solid red'
        active2.style.borderBottom = 'none'
        imgul2.style.display = 'none'
        imgul1.style.display = 'block'
    }
}
// 单选框方法以及获取选中商品数量
function danx() {
    // 设置计数器
    var k = 0
    //遍历所有单选框
    for (let i = 0; i < xuans.length; i++) {
        // 判断当前选中框是否被选中
        if (xuans[i].checked) {
            k++
            // console.log(k);
        }
    }
    // 判断选中框被选中的次数是否等于单选框的长度
    if (k == xuans.length) {
        quans[0].checked = true
        quans[1].checked = true
    } else {
        quans[0].checked = false
        quans[1].checked = false
    }
    // 给已选商品赋值
    cartTotal.querySelector('.cart_total div i span').innerHTML = k
}

var  cartBottom = document.querySelector('.cart_bottom')
// 店铺合计
function total1() {
    var sum = 0
    //获取所有商品 一个ul代表一个商品
    var uls = cartbig.children  //内容区域的所有子元素即为商品
    // 遍历所有商品 
    for(var i=0;i<uls.length;i++) {
        //获取小计  - 位置在ul第五个子元素的最后一个子元素
        var xiaoji =uls[i].children[4].lastElementChild.innerHTML
        // console.log(xiaoji,i);
        //累计求和
        sum += parseFloat(xiaoji)
    }
    //将商品合计给店铺合计赋值
    cartBottom.querySelector('.cart_bottom span').innerHTML = sum.toFixed(2)
}
total1()

var cartTotal = document.querySelector('.cart_total');
// 总价
function checked1() {
    var m =0 
    //统计
    var sum2 = 0
    //获取所有商品
    var uls = cartbig.children
    // 遍历每个商品
    for(let i=0;i<uls.length;i++) {
        //获取当前商品选中框
        var input1 = uls[i].children[0].lastElementChild
        // console.log(input1)
        //判断当前选中框是否被选中
        if(input1.checked) {
            //获取小计
            var xiaoji = uls[i].children[4].lastElementChild.innerHTML
            // console.log(price);
            //累计求和
            sum2+= parseFloat(xiaoji)

            //获取当前商品的数量
            var mm=uls[i].children[3].children[1].innerHTML
            // console.log(mm);
            m+=parseInt(mm)
        } 
    }
    var totalnum = cartTotal.querySelector('.totalnum');
    //给数量的位置赋值
    totalnum.innerHTML=m
    //将商品合计给店铺合计赋值
    cartTotal.querySelector('.cart_total div b span').innerHTML = sum2.toFixed(2)
}
checked1()